<template>
  <div class="search">
    <el-row :gutter="14" type="flex" justify="start">
      <el-col :span="20">
        <el-input v-model="search" style="width:200px;" placeholder="请输入课程名称"/>
        <el-button type="primary" icon="el-icon-search" @click="searchWord">搜索</el-button>
        <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        <!--<el-radio v-model="radio" label="1" border style="margin-left:36px;">全部</el-radio>-->
        <!--<el-radio v-model="radio" label="2" border>未上架</el-radio>-->
        <!--<el-radio v-model="radio" label="3" border>已上架</el-radio>-->
      </el-col>
      <el-col :span="4">
        <div style="float:right;">
          <el-button type="primary" icon="el-icon-plus" @click="handlePush">创建课程包</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import eventBus from './eventBus.js'

  export default {
    data() {
      return {
        radio: '1',
        search: ''
      }
    },
    methods: {
      searchWord() {
        eventBus.$emit('acceptKeyWord', this.search)
      },
      clearParams() {
        this.search = '';
        eventBus.$emit('acceptKeyWord', '')
      },
      handlePush() {
        this.$router.push('/classpackage/create-classpackage')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search {
    width: 100%;
    height: 70px;
    line-height: 70px;
    min-width: 1003px;

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
  }
</style>
